<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<body>
	<ui:composition>
		<h:form id="form">
			<p:dataTable var="car" value="#{dtLazyView.lazyModel}"
				paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" selectionMode="single"
				selection="#{dtLazyView.selectedCar}" id="carTable" lazy="true">
				<p:ajax event="rowSelect" listener="#{dtLazyView.onRowSelect}"
					update=":form:carDetail" oncomplete="PF('carDialog').show()" />
				<p:column headerText="Id" sortBy="#{car.id}" filterBy="#{car.id}">
					<h:outputText value="#{car.id}" />
				</p:column>
				<p:column headerText="Year" sortBy="#{car.year}"
					filterBy="#{car.year}">
					<h:outputText value="#{car.year}" />
				</p:column>
				<p:column headerText="Brand" sortBy="#{car.brand}"
					filterBy="#{car.brand}">
					<h:outputText value="#{car.brand}" />
				</p:column>
				<p:column headerText="Color" sortBy="#{car.color}"
					filterBy="#{car.color}">
					<h:outputText value="#{car.color}" />
				</p:column>
			</p:dataTable>

			<p:dialog header="Car Detail" widgetVar="carDialog" modal="true"
				showEffect="fade" hideEffect="fade" resizable="false">
				<p:outputPanel id="carDetail" style="text-align:center;">
					<p:panelGrid columns="2"
						rendered="#{not empty dtLazyView.selectedCar}"
						columnClasses="label,value">
						<f:facet name="header">
							<p:graphicImage
								name="demo/images/car/#{dtLazyView.selectedCar.brand}-big.gif" />
						</f:facet>

						<h:outputText value="Id:" />
						<h:outputText value="#{dtLazyView.selectedCar.id}" />

						<h:outputText value="Year" />
						<h:outputText value="#{dtLazyView.selectedCar.year}" />

						<h:outputText value="Color:" />
						<h:outputText value="#{dtLazyView.selectedCar.color}"
							style="color:#{dtLazyView.selectedCar.color}" />

						<h:outputText value="Price:" />
						<h:outputText value="#{dtLazyView.selectedCar.price}">
							<f:convertNumber type="currency" currencySymbol="$" />
						</h:outputText>
					</p:panelGrid>
				</p:outputPanel>
			</p:dialog>
		</h:form>
	</ui:composition>
</body>
</html>